﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户选择</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            height: 100vh;
            background: #f8f9fa;
            display: flex;
            flex-direction: column;
        }
        .search-container {
            background: #fff;
            padding: 15px;
            border-bottom: 1px solid #e6e6e6;
            flex-shrink: 0;
        }
        .table-container {
            background: #fff;
            flex: 1;
            overflow: hidden;
            padding: 0;
        }
        .search-container .layui-input,
        .search-container .layui-select {
            height: 36px;
            font-size: 13px;
        }
        .search-container .layui-btn-sm {
            height: 32px;
            line-height: 30px;
            font-size: 12px;
            padding: 0 10px;
            margin: 0 2px;
        }
        .layui-btn {
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        .layui-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .dialog-buttons {
            text-align: center;
            padding: 15px;
            background: #fff;
            border-top: 1px solid #e6e6e6;
            flex-shrink: 0;
        }
        .dialog-buttons .layui-btn {
            margin: 0 10px;
            min-width: 80px;
        }
        #customerTable {
            height: 100%;
        }
        .layui-table-body {
            overflow-y: auto !important;
            min-height: 200px !important;
        }
        .layui-table-main {
            height: auto !important;
            min-height: 200px !important;
        }
        
        /* 原生表格样式 */
        .native-table-container {
            border-radius: 4px;
        }
        .native-table-container .layui-table {
            border: none;
        }
        .native-table-container .layui-table th,
        .native-table-container .layui-table td {
            border: 1px solid #e6e6e6;
            padding: 8px 10px;
            text-align: left;
        }
        .native-table-container .layui-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .native-table-container .layui-table tbody tr:hover {
            background-color: #f8f8f8;
        }
        .native-table-container .layui-table tbody tr.selected-row {
            background-color: #e8f4fd !important;
        }
        .native-table-container .layui-table tbody tr:nth-child(even) {
            background-color: #fafafa;
        }
        .native-table-container .layui-table tbody tr:nth-child(even).selected-row {
            background-color: #e8f4fd !important;
        }
    </style>
</head>
<body>
    <!-- 搜索条件 -->
    <div class="search-container">
        <form class="layui-form" id="searchForm">
            <div class="layui-row layui-col-space8">
                <div class="layui-col-md2">
                    <input type="text" name="customerCode" placeholder="客户编码" class="layui-input">
                </div>
                <div class="layui-col-md2">
                    <input type="text" name="customerName" placeholder="客户名称" class="layui-input">
                </div>
                <div class="layui-col-md2">
                    <input type="text" name="customerNiciname" placeholder="客户简称" class="layui-input">
                </div>
                <div class="layui-col-md2">
                    <input type="text" name="customerEngName" placeholder="客户英文名称" class="layui-input">
                </div>
                <div class="layui-col-md2">
                    <select name="isActive">
                        <option value="">是否启用</option>
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>
                <div class="layui-col-md2">
                    <div style="text-align: center;">
                        <button type="button" class="layui-btn layui-btn-sm" id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="resetBtn">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>

                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 客户列表 -->
    <div class="table-container">
        <!-- 表格将通过JavaScript动态生成 -->
    </div>

    <!-- 底部按钮 -->
    <div class="dialog-buttons">
        <button type="button" class="layui-btn" id="confirmBtn">确定</button>
        <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
    </div>

    <script>
        layui.use(['table', 'form', 'layer'], function() {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            
            var selectedCustomer = null;

            // 计算表格高度
            function calculateTableHeight() {
                var windowHeight = $(window).height();
                var searchHeight = $('.search-container').outerHeight() || 80;
                var buttonHeight = $('.dialog-buttons').outerHeight() || 60;
                var calculatedHeight = windowHeight - searchHeight - buttonHeight - 40;
                
                // 确保最小高度
                var minHeight = 300;
                var maxHeight = 600;
                
                if (calculatedHeight < minHeight) {
                    calculatedHeight = minHeight;
                } else if (calculatedHeight > maxHeight) {
                    calculatedHeight = maxHeight;
                }
                
                return calculatedHeight;
            }

            // 直接使用AJAX加载数据，然后渲染表格
            loadCustomerData();



            // 加载客户数据并渲染表格
            function loadCustomerData() {
                $.ajax({
                    url: '/Customer/CustomerQuerys',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (Array.isArray(data)) {
                            // 清空表格容器
                            $('.table-container').empty();
                            
                            // 渲染表格
                            renderNativeTable(data);
                            
                            if (data.length === 0) {
                                layer.msg('没有客户数据', {icon: 0});
                            }
                        } else {
                            layer.msg('数据格式错误', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.msg('加载客户数据失败', {icon: 2});
                    }
                });
            }

            // 渲染原生HTML表格
            function renderNativeTable(data) {
                var containerHeight = calculateTableHeight();
                var tableHtml = '<div class="native-table-container" style="height: ' + containerHeight + 'px; overflow-y: auto; border: 1px solid #e6e6e6;">';
                tableHtml += '<table class="layui-table" style="margin: 0;">';
                tableHtml += '<thead>';
                tableHtml += '<tr>';
                tableHtml += '<th style="width: 60px; text-align: center;">选择</th>';
                tableHtml += '<th style="width: 120px;">客户编码</th>';
                tableHtml += '<th style="width: 150px;">客户名称</th>';
                tableHtml += '<th style="width: 120px;">客户简称</th>';
                tableHtml += '<th style="width: 120px;">客户类型</th>';
                tableHtml += '<th style="width: 130px;">客户电话</th>';
                tableHtml += '<th style="width: 100px;">是否启用</th>';
                tableHtml += '</tr>';
                tableHtml += '</thead>';
                tableHtml += '<tbody>';
                
                if (data && data.length > 0) {
                    data.forEach(function(item, index) {
                        tableHtml += '<tr style="cursor: pointer;" class="customer-row" data-index="' + index + '">';
                        tableHtml += '<td style="text-align: center;"><input type="radio" name="customerRadio" value="' + index + '" data-customer=\'' + JSON.stringify(item) + '\'></td>';
                        tableHtml += '<td>' + (item.customerCode || '') + '</td>';
                        tableHtml += '<td>' + (item.customerName || '') + '</td>';
                        tableHtml += '<td>' + (item.customerNiciname || '') + '</td>';
                        tableHtml += '<td>' + (item.customerType || '') + '</td>';
                        tableHtml += '<td>' + (item.customerPhone || '') + '</td>';
                        tableHtml += '<td>' + (item.customerIsTrue ? '<span style="color: #5FB878;">是</span>' : '<span style="color: #FF5722;">否</span>') + '</td>';
                        tableHtml += '</tr>';
                    });
                } else {
                    tableHtml += '<tr><td colspan="7" style="text-align: center; color: #999; padding: 20px;">暂无数据</td></tr>';
                }
                
                tableHtml += '</tbody>';
                tableHtml += '</table>';
                tableHtml += '</div>';
                
                $('.table-container').html(tableHtml);
                
                // 绑定行点击事件
                $('.customer-row').on('click', function() {
                    var radio = $(this).find('input[type="radio"]');
                    radio.prop('checked', true);
                    
                    // 高亮选中行
                    $('.customer-row').removeClass('selected-row');
                    $(this).addClass('selected-row');
                    
                    // 存储选中的客户信息
                    var customerData = radio.data('customer');
                    selectedCustomer = customerData;
                });
                
                // 绑定单选框变化事件
                $('input[name="customerRadio"]').on('change', function() {
                    if (this.checked) {
                        var customerData = $(this).data('customer');
                        selectedCustomer = customerData;
                        
                        // 高亮选中行
                        $('.customer-row').removeClass('selected-row');
                        $(this).closest('tr').addClass('selected-row');
                    }
                });
                
            }

            // 搜索功能（临时客户端过滤）
            $('#searchBtn').on('click', function() {
                // 重新加载数据
                loadCustomerData();
                layer.msg('搜索功能待后端接口完善', {icon: 0});
            });

            // 重置功能
            $('#resetBtn').on('click', function() {
                document.getElementById('searchForm').reset();
                form.render();
                loadCustomerData();
            });

            // 确定按钮
            $('#confirmBtn').on('click', function() {
                // 检查是否有选中的客户
                var checkedRadio = $('input[name="customerRadio"]:checked');
                
                if (checkedRadio.length === 0) {
                    layer.msg('请选择一个客户', {icon: 2});
                    return;
                }
                
                // 获取选中的客户数据
                var customerData = checkedRadio.data('customer');
                if (!customerData) {
                    layer.msg('获取客户信息失败', {icon: 2});
                    return;
                }
                
                // 调用父页面的回调函数
                if (parent.window.customerSelectCallback) {
                    parent.window.customerSelectCallback({
                        code: customerData.customerCode,
                        name: customerData.customerName,
                        niciname: customerData.customerNiciname,
                        type: customerData.customerType,
                        phone: customerData.customerPhone
                    });
                    
                    // 关闭弹窗
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                } else {
                    layer.msg('回调函数不存在', {icon: 2});
                }
            });

            // 取消按钮
            $('#cancelBtn').on('click', function() {
                // 关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });

            // 窗口大小改变时重新调整表格高度
            $(window).resize(function() {
                var newHeight = calculateTableHeight();
                $('.native-table-container').css('height', newHeight + 'px');
            });

            // 渲染表单
            form.render();
        });
    </script>
</body>
</html>